<template>
	<el-container style="height: 520px">
		<el-header>
			<vab-query-form-top-panel>
				<el-form
					inline
					label-width="49px"
					:model="queryList"
					style="margin-top: 5px"
					><el-input
						v-model="queryList.Code"
						placeholder="请输入物品编码"
						style="width: 180px"
					></el-input>
					&nbsp;
					<el-input
						v-model="queryList.Name"
						placeholder="请输入物品名称"
						style="width: 150px"
					></el-input>
					&nbsp;
					<el-select
						v-model="queryList.UomCode"
						placeholder="请选择单位"
						style="width: 150px"
						><el-option
							v-for="item in optionsUomCode"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
					&nbsp;
					<el-select
						v-model="queryList.State"
						placeholder="请选择状态"
						clearable
						:teleported="false"
						style="width: 150px"
					>
						<el-option label="---请选择状态---" value="" />
						<el-option label="禁用" value="0" />
						<el-option label="启用" value="1" />
					</el-select>
					&nbsp;
					<el-button type="primary" @click="$refs.mytable.getData()"
						>查询</el-button
					>
				</el-form>
			</vab-query-form-top-panel>
		</el-header>
		<el-foot>
			<scTable
				ref="mytable"
				:data="listData"
				:attrList="attrList"
				:valueList="valueList"
				:queryList="queryList"
				:sort-orders="['ascending', 'descending']"
				@selection-change="selectionChange"
				row-key="Code"
				key="Code"
				stripe
				:hideDo="true"
				height="480px"
				style="max-height: 480px; min-width: 420"
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column
					type="index"
					label="序号"
					prop="rownumber"
					width="50"
				></el-table-column>
				<el-table-column
					label="商品主图"
					prop="MainAttachment"
					width="100"
					align="center"
				>
					<template #default="scope">
						<el-image
							style="height: 60px"
							:src="scope.row.MainAttachment"
							:fit="contain"
							:zoom-rate="1.2"
							:max-scale="7"
							:min-scale="0.2"
							:preview-src-list="[scope.row.MainAttachment]"
							:z-index="999"
							:preview-teleported="true"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="商品编码"
					prop="GoodsCode"
					width="100"
					sortable
				></el-table-column>

				<el-table-column
					label="商品名称"
					prop="GoodsName"
					width="180"
					sortable
				></el-table-column>
				<el-table-column
					prop="Standard"
					label="规格"
					width="150"
				></el-table-column>
				<el-table-column
					prop="GoodsTypeName"
					label="大类"
					width="120"
				></el-table-column>
				<el-table-column
					prop="SubGoodsTypeName"
					label="小类"
					width="150"
				></el-table-column>
				<el-table-column
					prop="UomName"
					label="单位"
					width="100"
				></el-table-column>
				<el-table-column
					prop="SalePrice"
					label="售价"
					width="100"
				></el-table-column>
				<el-table-column label="状态" prop="State" width="100">
					<template #default="scope">
						<el-switch
							v-model="scope.row.State"
							disabled
							active-value="正常"
							inactive-value="禁用"
						/>
					</template>
				</el-table-column> </scTable
		></el-foot>
	</el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
	name: "typelist",
	components: {
		publicjs,
	},
	data() {
		return {
			selectionRows: [],
			pkList: ["Code"],
			attrList: {
				Name: "Goods",
				UseDistinct: false,
				OrgCode: "",
				UseBackUp: false,
				UseGroup: false,
			},
			valueList: {
				Code: "GoodsCode",
				Name: "GoodsName",
				UomCode: "UomCode",
				CostPrice: "CostPrice",
				SalePrice: "SalePrice",
				Standard: "Standard",
				GoodsTypeName: "GoodsTypeName",
				SubGoodsTypeName: "SubGoodsTypeName",
				MainAttachment: "MainAttachment",
				//TypeName: "TypeName",
				State: "State",
			},
			queryList: {
				Code: "",
				Name: "",
				UomCode: "",
				TypeCode: "",
				State: "",
			},
			result: "", // 运行结果
			props1: {
				checkStrictly: true,
				emitPath: false,
			},
			optionsUomCode: [],
			optionsTypeCode: [],
		};
	},
	methods: {
		//表格选择后回调事件
		selectionChange(selection) {
			// eslint-disable-next-line no-debugger
			//debugger;
			this.selectionRows = selection;
		},

		async opBindData() {
			this.$refs.mytable.clearSort();
			this.$refs.mytable.getData();
		},
		async initOptions() {
			var head = new publicjs.head();
			publicjs.initHead(head, "getfirstdatasource");
			var ed = new publicjs.entitydata(head);
			var eo = new publicjs.entityobj();
			eo.AttrList = {
				Name: "Goods",
				AcceptControl: "UomCode",
				OrgCode: "",
			};
			ed.Data.Content.ObjectList.Object.push(eo);
			try {
				var returnValueStr = await this.$API.auth.objProcess.post(ed);
				var returnValue = JSON.parse(returnValueStr);
				// eslint-disable-next-line no-debugger
				//debugger;
				console.log(returnValue.content);
				if (returnValue.Result.OpFlag == "1") {
					var objectList =
						returnValue.Result.Content.ObjectList.Object;
					this.optionsUomCode = objectList.rows.row;
				}
			} catch (error) {
				this.loading = false;
				this.$alert(error.message, "提示", { type: "error" });
				return false;
			}
		},
		formatterState(rowData) {
			// eslint-disable-next-line no-debugger
			//debugger;
			switch (rowData.State) {
				case "0":
					return "禁用";
				case "1":
					return "启用";
				default:
					return "";
			}
		},
	},
	async mounted() {
		await this.initOptions();
		await this.opBindData();
	},
};
</script>
